        <template>
  <div>
      <el-form :inline="true" :model="TicOrdStaSearchFrom" class="demo-form-inline">
          <el-form-item label="序号">
              <el-input v-model="TicOrdStaSearchFrom.searchId" placeholder="序号"></el-input>
          </el-form-item>
          <el-form-item label="比赛项目">
              <el-input v-model="TicOrdStaSearchFrom.searchName" placeholder="比赛项目"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="page">查询</el-button>
              <el-button type="primary" @click="add">添加</el-button>
          </el-form-item>
      </el-form>
      <!--基础表格-->
      <el-table
              :data="TicOrdStaAry"
              style="width: 100%">
          <el-table-column
                  prop="ticketID"
                  label="序号"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="orderId"
                  label="订单编号"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="ticketName"
                  label="比赛项目"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="beginTime"
                  label="开始时间"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="name"
                  label="比赛场馆"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="price"
                  label="价格"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="totalCount"
                  label="剩余票数"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="idcard"
                  label="身份证号码"
                  width="180">
          </el-table-column>
          <el-table-column
                  label="操作"
          >
              <template slot-scope="scope">
                  <el-button type="text" size="small" @click="bianji(scope.$index,scope.row)">编辑</el-button>
                  <el-button type="text" size="small" @click="shanchu(scope.$index,scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="current"
              :page-sizes="pageList"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>


  </div>
</template>
<script>
  export default ({
      data(){
          return{
              TicOrdStaAry: [],
              current: 1,
              size: 5,
              total: 0,
              TicOrdStaSearchFrom: {},
              pageList: [2, 5, 10, 15],

          }
      },
      methods:{
        page(){
            this.$axios.post(`/TOD/page?pageNo=${this.current}&pageSize=${this.size}`,this.TicOrdStaSearchFrom).then(r=>{
                this.TicOrdStaAry = r.data.list
                this.total = r.data.total
                console.log(r.data)
            })
        },
          handleSizeChange(val){
              this.size = val
              this.page()
          },
          handleCurrentChange(val){
              this.current = val
              this.page()
          },
      },
      created(){
          this.page()
      }
  })
</script>